<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#content {
				position: absolute;
				width: 90%;
				height: 30%;
				top: 5%;
				left: 5%;
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		
		<script type="text/javascript">
			function getRandomColor() {
				return '#' + (function(h) {
					return new Array(7 - h.length).join("0") + h
				})((Math.random() * 0x1000000 << 0).toString(16))
			}

			function randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						break;
					default:
						return 0;
						break;
				}
			}

			function moveMessage(messages) {
				var content = document.getElementById('content');
				var contentLeft = content.offsetLeft;
				var contentTop = content.offsetTop;
				var contentWidth = content.offsetWidth;
				var contentHeight = content.offsetHeight;
				for (var i = 0; i < messages.length; i++) {
					var random = randomNum(1, 5);
					
					var lableTop = randomNum(contentTop, contentTop+contentHeight-25);
					var _lable = document.createElement('div');
					_lable.style.position = 'absolute';
					_lable.style.zIndex = 999;
					
					_lable.style.right=contentLeft+'px';
					_lable.style.top = lableTop + 'px';
					_lable.style.opacity = 1;
					_lable.style.color = getRandomColor();
					_lable.style.whiteSpace='nowrap';
					_lable.append(messages[i]);
					document.body.appendChild(_lable);
					var startLeft = _lable.offsetLeft;
					var lableTimer = setInterval(function() {
						if (_lable.offsetLeft <= (contentLeft)) {
							document.body.removeChild(_lable);
							clearInterval(lableTimer);
						}
						_lable.style.left = (startLeft--) + 'px';
					}, 10);
				}
			}
			var message = [];
			var timer = setInterval(function() {

				var thisSend = message.splice(0, message.length >= 10 ? 10 : message.length);
				if(thisSend.length>0){
					moveMessage(thisSend);
				}			

			}, 100);

			function submit(e) {
				var input = document.getElementById('input');
				var evt = window.event || e;
				if (evt.keyCode == 13) {
					message.push(input.value.trim());
					input.value = "";
				}
			}

			function clickSub() {
				var input = document.getElementById('input');
				message.push(input.value.trim());
				//input.value = "";
			}
		</script>
	</body>
</html>
